<template>
  <div class="app-container">
    <el-dialog
      custom-class="explain-dialog"
      :visible.sync="dialogFlag"
      :close-on-click-modal="false"
      :lock-scroll="false"
      :fullscreen="true"
      :show-close="false"
    >
      <div class="showmsg-wrapper">
        <div class="container">
          <span class="icon" :class="tipsCls"></span>
          <div class="message-wrapper">
            <h3 class="title">{{msgObj.title}}</h3>
            <p class="msg">{{msgObj.msg}}</p>
            <div class="btn-wrapper">
              <template v-for="item in btns">
                <div class="btn-template" :key="item.txt">
                  <el-button
                    v-if="item.type == 'button'"
                    :type="item.style || 'primary'"
                    v-loading="loading"
                    @click="loading = true"
                  >
                    <template>
                      <a
                        class="link"
                        href="javascript:;"
                        v-if="item.url == 'back'"
                        @click="back"
                      >{{item.txt}}</a>
                      <a class="link" :href="item.url" v-else>{{item.txt}}</a>
                    </template>
                  </el-button>
                  <a :href="item.url ? item.url : 'javascript:;'" v-else class="other-link">
                    {{item.txt}}
                    {{item.url ? '>' : ''}}
                  </a>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getQueryObject } from "@/utils";
export default {
  data() {
    return {
      msgObj: {},
      btns: null,
      loading: false,
      dialogFlag: true
    };
  },
  created() {
    try {
      this.msgObj = getQueryObject(window.location.href.split("?")[1]);
      this.btns = JSON.parse(this.msgObj.btns);
    } catch {
      console.log(11334);
      console.log("error");
    }
  },
  computed: {
    tipsCls() {
      return this.msgObj.type == "success" ? "success" : "";
    }
  },
  methods: {
    back() {
      setTimeout(() => {
        this.loading = false;
      }, 1000);
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="scss" scoped>
.showmsg-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  margin-top: 100px;
  .container {
    .icon {
      display: block;
      width: 120px;
      height: 150px;
      background: url("../../assets/icon-fail.png") no-repeat 0 0/ 100% 100%;
      margin: 20px auto;
      &.success {
        background: url("../../assets/icon-success.png") no-repeat 0 0/ 100% 100%;
      }
    }
    .message-wrapper {
      text-align: center;
      .title {
        height: 44px;
        line-height: 44px;
        font-size: 20px;
        color: #333;
        margin: 0 0 10px 0;
      }
      .msg {
        margin: 0;
        color: #999;
        font-size: 14px;
        margin-bottom: 50px;
      }
      .btn-wrapper {
        margin-top: 20px;
        .btn-template {
          display: inline-block;
        }
        .el-button {
          height: 38px;
          line-height: 38px;
          font-size: 14px;
          padding: 0 10px;
          .link {
            display: block;
            width: 100%;
            height: 100%;
          }
        }
        .other-link {
          font-size: 14px;
          color: #999;
          margin-left: 10px;
          &:hover {
            color: #ff7f5b;
          }
        }
      }
    }
  }
}
</style>
